<template>
  <a-spin style="display: block">
    <a-list size="small">
      <a-list-item
        v-for="item of messageList"
        :key="item.messageId"
      >
        <a-list-item-meta
          :title="item.messageTitle"
          :description="item.messageContent "
        />
        <template #actions>
          <icon-edit />
          <icon-delete />
        </template>
      </a-list-item>
    </a-list>
    <a-empty v-if="messageList.length <=0" />
  </a-spin>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps({
  messageList: {
    type: Array,
    default: () => {
      return [];
    }
  }
});
</script>

<style scoped lang="less">
:deep(.arco-popover-popup-content) {
  padding: 0;
}

:deep(.arco-list-item-meta) {
  align-items: flex-start;
}

:deep(.arco-tabs-nav) {
  padding: 14px 0 12px 16px;
  border-bottom: 1px solid var(--color-neutral-3);
}

:deep(.arco-tabs-content) {
  padding-top: 0;

  .arco-result-subtitle {
    color: rgb(var(--gray-6));
  }
}
</style>
